<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信自动@功能</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .container {
            margin-top: 50px;
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .form-group {
            margin-bottom: 20px;
        }

        #result {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        #statusMessage {
            margin-top: 20px;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }

        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        .btn-success {
            background-color: #28a745;
            border-color: #28a745;
        }

        .btn-success:hover {
            background-color: #218838;
            border-color: #218838;
        }

        .alert {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>微信消息发送系统</h1>
        <!-- 输入群昵称、消息内容、关键词和上传图片的表单 -->
        <form id="inputForm">
            <div class="form-group">
                <label for="groupName">群昵称</label>
                <input type="text" class="form-control" id="groupName" placeholder="请输入群昵称" required>
            </div>
            <div class="form-group">
                <label for="message">消息内容</label>
                <textarea class="form-control" id="message" rows="3" placeholder="请输入消息内容" required></textarea>
            </div>
            <div class="form-group">
                <label for="keyword">关键词</label>
                <!-- 去掉 required 属性 -->
                <input type="text" class="form-control" id="keyword" placeholder="请输入关键词">
            </div>
            <div class="form-group">
                <label for="imageFile">上传包含人名的图片</label>
                <input type="file" class="form-control" id="imageFile" required>
            </div>
            <button type="button" class="btn btn-primary" onclick="recognizeNames()">识别名字</button>
        </form>
        <!-- 显示识别结果的区域 -->
        <div id="result">
            <h2>识别结果</h2>
            <ul id="recognizedNamesList"></ul>
        </div>
        <!-- 发送微信消息的按钮 -->
        <button type="button" class="btn btn-success" onclick="sendWechatMessage()" disabled
            id="sendButton">发送到微信群</button>
        <!-- 显示操作状态的区域 -->
        <div id="statusMessage"></div>
    </div>

    <!-- 引入 Bootstrap JS 和 Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
    <script>
        let recognizedNames = [];
        let groupName = '';
        let message = '';

        async function recognizeNames() {
            groupName = document.getElementById('groupName').value;
            message = document.getElementById('message').value;
            const keyword = document.getElementById('keyword').value;
            const imageFile = document.getElementById('imageFile').files[0];

            if (!groupName || !message || !imageFile) {
                document.getElementById('statusMessage').innerHTML = '<div class="alert alert-danger">请确保群昵称、消息内容和图片都已填写/选择。</div>';
                return;
            }

            try {
                const formData = new FormData();
                formData.append('file', imageFile);
                formData.append('keyword', keyword);
                formData.append('group_name', groupName);

                const ocrResponse = await fetch('http://127.0.0.1:8000/zhaunhuan', {
                    method: 'POST',
                    body: formData
                });

                const ocrData = await ocrResponse.json();
                recognizedNames = ocrData.names;

                const recognizedNamesList = document.getElementById('recognizedNamesList');
                recognizedNamesList.innerHTML = '';
                recognizedNames.forEach(name => {
                    const listItem = document.createElement('li');
                    listItem.textContent = name;
                    recognizedNamesList.appendChild(listItem);
                });

                document.getElementById('sendButton').disabled = false;
                document.getElementById('statusMessage').innerHTML = '<div class="alert alert-success">名字识别成功！</div>';
            } catch (error) {
                document.getElementById('statusMessage').innerHTML = `<div class="alert alert-danger">发生错误：${error.message}</div>`;
            }
        }

        async function sendWechatMessage() {
            try {
                const sendResponse = await fetch('http://127.0.0.1:8000/send_wechat', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        names: recognizedNames,
                        group_name: groupName,
                        message: message
                    })
                });

                const sendData = await sendResponse.json();

                if (sendData.status === 'success') {
                    document.getElementById('statusMessage').innerHTML = '<div class="alert alert-success">消息已成功发送到微信群</div>';
                } else {
                    document.getElementById('statusMessage').innerHTML = `<div class="alert alert-danger">消息发送失败：${sendData.message}</div>`;
                }
            } catch (error) {
                document.getElementById('statusMessage').innerHTML = `<div class="alert alert-danger">发生错误：${error.message}</div>`;
            }
        }
    </script>
</body>

</html>